<template>
    <section class="section testimonials">
        <div class="container">
            <h2 class="section-title">旅行者评价</h2>
            <div class="testimonials-grid">
                <TestimonialCard v-for="testimonial in testimonials" :key="testimonial.id" :testimonial="testimonial" />
            </div>
            <div class="rating-overview">
                <div class="average-rating">
                    <span class="stars">★★★★★</span>
                    <span class="score">{{ averageRating }}/5</span>
                </div>
                <p>基于{{ testimonials.length }}条真实评价</p>
                <button class="leave-review" @click="handleLeaveReview">留下您的评价</button>
            </div>
        </div>
    </section>
</template>

<script>
import TestimonialCard from '@/components/appTestimonial.vue'

export default {
    name: 'TravelerReviews',
    components: {
        TestimonialCard
    },
    data() {
        return {
            testimonials: [
                {
                    id: 1,
                    author: '张先生',
                    avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
                    rating: 5,
                    content: '这次马尔代夫之旅太棒了！水上别墅非常豪华，服务一流，浮潜体验令人难忘。',
                    date: '2023-05-15',
                    trip: '马尔代夫豪华7日游'
                },
                {
                    id: 2,
                    author: '李女士',
                    avatar: 'https://randomuser.me/api/portraits/women/44.jpg',
                    rating: 4,
                    content: '巴黎艺术之旅很有文化气息，导游知识渊博，唯一不足是天气有点冷。',
                    date: '2023-04-22',
                    trip: '巴黎浪漫6日游'
                },
                {
                    id: 3,
                    author: '王先生',
                    avatar: 'https://randomuser.me/api/portraits/men/75.jpg',
                    rating: 5,
                    content: '新西兰冒险之旅超乎想象！蹦极和冰川徒步非常刺激，风景美得让人窒息。',
                    date: '2023-06-10',
                    trip: '新西兰冒险10日游'
                },
                {
                    id: 4,
                    author: '赵女士',
                    avatar: 'https://randomuser.me/api/portraits/women/63.jpg',
                    rating: 4.5,
                    content: '东京迪士尼乐园孩子玩得很开心，美食种类丰富，酒店位置便利。',
                    date: '2023-03-28',
                    trip: '东京都市5日游'
                },
                {
                    id: 5,
                    author: '刘先生',
                    avatar: 'https://randomuser.me/api/portraits/men/81.jpg',
                    rating: 5,
                    content: '冰岛极光之旅一生难忘！蓝湖温泉太舒服了，看到了壮观的极光。',
                    date: '2023-02-18',
                    trip: '冰岛极光9日游'
                }
            ]
        }
    },
    computed: {
        averageRating() {
            if (!this.testimonials || this.testimonials.length === 0) return 0;
            const sum = this.testimonials.reduce((acc, curr) => acc + curr.rating, 0);
            return (sum / this.testimonials.length).toFixed(1);
        }
    },
    methods: {
        handleLeaveReview() {
            // 这里可以处理"留下评价"按钮的点击事件
            alert('感谢您的反馈！评价功能即将开放。');
            // 或者 this.$emit('leave-review') 如果需要通知父组件
        }
    }
}
</script>

<style scoped>
.testimonials {
    background-color: var(--light-color);
    padding: 60px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    color: var(--dark-color);
    font-size: 2rem;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.rating-overview {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.average-rating {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.stars {
    color: #ffc107;
    font-size: 1.5rem;
    letter-spacing: 2px;
}

.score {
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--dark-color);
}

.leave-review {
    margin-top: 20px;
    padding: 10px 25px;
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
}

.leave-review:hover {
    background: var(--primary-color);
    color: var(--white);
}

@media (max-width: 768px) {
    .testimonials {
        padding: 40px 0;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}
</style>